<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
 <head>
  <title>添加活动借用申请</title>
  <t:base type="jquery,easyui,tools,DatePicker"></t:base>
  <script type="text/javascript">
  //编写自定义JS代码
  	$(function(){
  		$("#deviceInfo").html('${ab.deviceInfo}');
  		$("#remark").html('${ab.remark}');
  		//给时间控件加上样式
		$("input[name='applyDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
		$("input[name='receiveDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
		$("input[name='beginUseDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
		$("input[name='endUseDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
  	});
  </script>
    <style>
  	#borrowDeviceList{
  		width:100%;
  		margin-top:10px;
  	}
  	
  	#borrowDeviceList th{
  		background-color:#ddd;
  		text-align:center;
  	}
  	
  	#borrowDeviceList td{
  		text-align:center;
  	}
  	
  	#borrowDeviceList td a{
  		cursor:pointer;
  	}
  	.itemNum{
  		text-align:right;
  		padding-right:2px;
  	}
  </style>
 </head>
 <body>
  <t:formvalid formid="formobj" dialog="true" layout="table" action="activityBorrowController.do?addApply" tiptype="3" beforeSubmit="validateInfo">
		<input id="id" name="id" type="hidden" value="${ab.id }"> 
		<input id="models" type="hidden" name="models">
		<input id="nums" type="hidden" name="nums">
		<table style=" " cellpadding="0" cellspacing="1" class="formtable">
				<tr>
					<td align="right">
						<label class="Validform_label">
							领用日期:
						</label>
					</td>
					<td class="value"> 
						<input name="receiveDate" value="<fmt:formatDate pattern='yyyy-MM-dd' value='${ab.receiveDate }'/>">
						<span class="Validform_checktip"></span>
						<label class="Validform_label" style="display: none;">品牌</label>
					</td>
				</tr>	
				<tr>
					<td align="right">
						<label class="Validform_label">
							使用日期:
						</label>
					</td>
					<td class="value"> 
                	    <input name="beginUseDate" value="<fmt:formatDate pattern='yyyy-MM-dd' value='${ab.beginUseDate }'/>">
						<span class="Validform_checktip"></span>
						<label class="Validform_label" style="display: none;">请输入日期</label>
						
					</td>
				</tr>	
				<tr>
					<td align="right">
						<label class="Validform_label">
							结束日期:
						</label>
					</td>
					<td class="value"> 
                	    <input name="endUseDate" value="<fmt:formatDate pattern='yyyy-MM-dd' value='${ab.endUseDate }'/>">
						<span class="Validform_checktip"></span>
						<label class="Validform_label" style="display: none;">请输入日期</label>
						
					</td>
				</tr>	
				<tr>
					<td align="right">
						<span class="need-star" style="color:red;">*</span>
						<label class="Validform_label">
							设备名称、型号、数量:
						</label>
					</td>
					<td class="value" colspan="4" style="height:140px;vertical-align:top">
						  <a onclick="selectModel1()" class="myBtn">添加设备</a>
						  	<table id="borrowDeviceList">
							<thead>
								<th style="width:80px;">设备品牌</th><th>型号</th><th>数量</th><th>操作</th>
								<c:forEach items="${modelList}" var="m">
									<tr class='deviceItem' data-id='${m.id}'>
										<td class='brand'>${m.brand}</td><td class='model'>${m.model}</td>
										<td><input value='${m.num}' class='itemNum' onkeypress='return isNumbers(event)' style='width:30px;'></td>
										<td>
											<a onclick='deleteRow(this)'>删除</a>
										</td>
									</tr>
								</c:forEach>
							</thead> 
							</table> 
					</td>
				</tr>
				<tr>
					<td align="right">
						<label class="Validform_label">
							备注:
						</label>
					</td>
					<td class="value" colspan="4">
						  	 <textarea style="width:300px;height:50px;" class="inputxt" rows="6" id="remark" name="remark" maxlength="200">${ab.remark}</textarea>
							<span class="Validform_checktip"></span>
							<label class="Validform_label" style="display: none;">备注</label>
					</td>
			 
				</tr>
			</table>
		</t:formvalid>
 </body>
 <script>
 
	$(document).ready(function(){
		//给时间控件加上样式
			$("input[name='applyDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
			$("input[name='receiveDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
			$("input[name='beginUseDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
			$("input[name='endUseDate']").attr("class","Wdate").click(function(){WdatePicker({dateFmt:'yyyy-MM-dd'});});
			
	});
	
	function selectModel1(){
		var api = frameElement.api, W = api.opener;
		 
		 var addurl = 'dictDeviceModelController.do?goSelect';
		  $.dialog({
			  	id:'selectModel',
				content: 'url:'+addurl,
				lock : true,
				zIndex: 2200, 
				width:500,
				height:280,
				title:'选择设备型号', 
				opacity : 0.3,
				cache:false,
			    ok: function(){
			    	iframe = this.iframe.contentWindow; 
			    	var brandName =  iframe.getdeviceModelListSelections("brand.brandName")[0];
			 		var modelId = iframe.getdeviceModelListSelections("id")[0];
			 		var modleName = iframe.getdeviceModelListSelections("modelName")[0];
			 		
			 		if(modelId.length > 10){
			 			insertTableItem(brandName,modleName,modelId);
			 			return true;
			 		}
			    	
					return false;
			    },
			    cancelVal: '关闭',
			    cancel: true ,
			    parent:api
			});
	}
	
	function insertTableItem(brand,model,modelId){
		 var valid = true;
		 $('.deviceItem').each(function(){
			 
				 var b = $(this).find(".brand").html();
	 			 var m = $(this).find(".model").html();
	 			 if(b==brand && model == m){
	 				tip("设备已经添加到清单中！");
	 				valid = false;
	 			 }
		 });
		 
		 if(!valid) return;
		  
		  
		  var tr = "<tr class='deviceItem' data-id='"+modelId+"'><td class='brand'>"+brand+"</td><td class='model'>"+model+"</td>"+
		  "<td><input value='1' class='itemNum' onkeypress='return isNumbers(event)' style='width:30px;'></td><td><a onclick='deleteRow(this)'>删除</a></td>" 
		  "</tr>";
		  $('#borrowDeviceList').append(tr);
		  
		 return true;
	}
	
	  function deleteRow(obj,id){
		  $(obj).parent().parent().remove();
		  for(var i =0;i<selectedDevice.length;i++){
			 if( id == selectedDevice[i].id){
				selectedDevice.splice(i,1);
				return;
			 }
		  }
	  }
	  
	  function validateInfo(){
			var count =  $('.deviceItem').length;
			if(count > 0){
				var models = '';
				var nums = '';
				var modelId = $('.deviceItem').each(function(){
					models += $(this).attr("data-id");
					models += ",";
					
					nums += $(this).find('.itemNum').val();
					nums +=","
				});
				
				$('#models').val(models);
				$('#nums').val(nums);
				 
				return true;
			}else{
				tip('请选择要借用的设备！');
				return false;			
			} 
	 	  }
	  
	 function isNumbers(e)
	{
	 	var keynum
	 	var keychar
	 	var numcheck
	
	 	if(window.event) // IE
	 	  {
	 	  keynum = e.keyCode
	 	  }
	 	else if(e.which) // Netscape/Firefox/Opera
	 	  {
	 	  keynum = e.which
	 	  }
	 	keychar = String.fromCharCode(keynum)
	 	numcheck = /\d/
	 	return numcheck.test(keychar)
	}
 	
 </script>
 